<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-10-23 14:55:57
 * @LastEditTime: 2023-11-14 14:35:12
-->
<template>
    <div class="loop" v-for="(item, index) in userList" :key="item">

        <div v-if="userList.length > 1" class="dot" @click="reduce(index)">─</div>

        <div>
            <div class="head"><span class="must">※</span>{{ $t('text.Contract.l309') }}</div>
            <div class="inputDom" :style="inputStyles">

                <div @click="item.show1 = !item.show1" :style="selectStyles" :class="item.isHit ? 'title2' : 'title'">
                    <div class="pd" :class="item.isSelect1 ? 'pd2' : ''">{{ item.persona2 }}</div>
                    <img class="imgRow pd" src="../../assets/images/upRow.svg">
                </div>
                <input class="myInput" v-model="item.name" :class="item.isHit ? 'pd3' : ''" @input="changeMust(index)">

                <div class="leftText">{{ leftText }}</div>

                <div class="popup" v-if="item.show1" :style="selectStyles">
                    <div class="item_name" v-for="s in select1" v-bind:key="s" @click="selectItem(s, index, true)">
                        <div v-if="s.dictName === item.persona2" class="item_name_default">{{ s.dictName }}</div>
                        <div v-else>{{ s.dictName }}</div>
                    </div>
                </div>

            </div>
            <div class="overlay" v-if="item.show1" @click="item.show1 = !item.show1"></div>
        </div>

        <div>
            <div class="head">{{ $t('text.Contract.l310') }}</div>
            <div class="inputDom" :style="inputStyles">
                <input class="myInput" v-model="item.phone">
            </div>
        </div>


        <div>
            <div class="head">{{ $t('text.Contract.l311') }}</div>
            <div class="inputDom" :style="inputStyles">

                <div @click="item.show2 = !item.show2" :style="selectStyles" class="title">
                    <div class="pd" :class="item.isSelect2 ? 'pd2' : ''">{{ item.credentialType2 }}</div>
                    <img class="imgRow pd" src="../../assets/images/upRow.svg">
                </div>
                <input class="myInput" v-model="item.credential" @input="changeMust(index)">

                <div class="leftText">{{ leftText }}</div>

                <div class="popup" v-if="item.show2" :style="selectStyles">
                    <div class="item_name" v-for="s in select2" v-bind:key="s" @click="selectItem(s, index, false)">
                        <div v-if="s.dictName === item.credentialType2" class="item_name_default">{{ s.dictName }}</div>
                        <div v-else>{{ s.dictName }}</div>
                    </div>
                </div>

            </div>
            <div class="overlay" v-if="item.show2" @click="item.show2 = !item.show2"></div>
        </div>

        <div>
            <div class="head">&ensp;</div>
            <div class="inputAdd" v-if="index == userList.length - 1" @click="addLoop" :style="inputStyles">+{{ buttonName
            }}
            </div>
        </div>
    </div>
</template>
    
<script>

export default {
    name: 'CommonInputLoopKey',
    emits: ['returnData', 'clearData', 'mustCount'],
    components: {
    },
    props: {
        mustHit: {
            default: '',
            type: String
        },
        leftText: {
            default: '',
            type: String
        },
        inputStyles: {
            default: { width: '160px' }
        },
        selectStyles: {
            default: { 'min-width': '60px' }
        },
        default: [String, Number],
        value: {
            default: ''
        },
        select1: {
            default: []
        },
        select2: {
            default: []
        },
        buttonName: String,
        fromType: Number,
    },
    data() {
        return {
            userList: [{
                show1: false,
                show2: false,
                isSelect1: false,
                isSelect2: false,
                isHit: false,
                persona: '',
                persona2: '',
                name: "",
                credentialType: '',
                credentialType2: '',
                credential: "",
                phone: "",
                fromType: this.fromType
            }]
        }
    },
    mounted() {
    },
    methods: {
        selectItem(s, index, isFirst) {
            if (isFirst) {
                this.userList[index].isSelect1 = true
                this.userList[index].persona = s.dictValue
                this.userList[index].persona2 = s.dictName
                this.userList[index].show1=!this.userList[index].show1
            } else {
                this.userList[index].isSelect2 = true
                this.userList[index].credentialType = s.dictValue
                this.userList[index].credentialType2 = s.dictName
                this.userList[index].show2=!this.userList[index].show2
            }
        },
        changeMust(index) {
            if (this.userList[index].isHit) {
                this.userList[index].isHit = !this.userList[index].isHit
            }
        },
        inputReturn() {
            let flag = true
            this.userList.forEach(element => {
                if (!element.name?.trim()) {
                    element.isHit = true
                    flag = false
                }
            });
            return flag
        },
        addLoop() {
            this.userList.push({
                show1: false,
                show2: false,
                isHit: false,
                isSelect1: false,
                persona: this.select1?.[0].dictValue,
                persona2: this.select1?.[0].dictName,
                name: "",
                credentialType: this.select2?.[0].dictValue,
                credentialType2: this.select2?.[0].dictName,
                credential: "",
                phone: "",
                fromType: this.fromType
            })
        },
        reduce(index) {
            this.userList.splice(index, 1)
        }
    },
    watch: {
        userList: {
            handler() {
                let tag = true
                this.userList.forEach(element => {
                    if (element.name == '')
                        tag = false
                });
                if (tag) {
                    return this.$emit('returnData', { ['userList' + this.fromType]: this.userList });
                }
            },
            deep: true
        },
        select1() {
            this.userList[0].persona = this.select1[0].dictValue
            this.userList[0].persona2 = this.select1[0].dictName
        },
        select2() {
            this.userList[0].credentialType = this.select2[0].dictValue
            this.userList[0].credentialType2 = this.select2[0].dictName
        }
    },
    computed: {
    }

}
</script>
    
<style scoped>
.dot {
    width: 15px;
    height: 15px;
    position: absolute;
    background: #ec808d;
    border-radius: 100%;
    color: white;
    font-size: 15px;
    font-weight: 600;
    line-height: 14px;
    left: -25px;
    bottom: 5px;
}

.loop {
    display: flex;
    width: 100%;
    position: relative;
}

.inputAdd {
    border: 1px solid #6698ff;
    border-radius: 3px;
    margin: 1px 0;
    color: #6698ff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
}

.inputDom {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 15px;
}

.myInput {
    outline: none;
    height: 20px;
    border: 1px solid rgb(220, 223, 230);
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 0px 3px 3px 0px;
    font-size: 12px;
    position: relative;
    margin: 1px;
    width: 100%;
    margin-left: -1px;
}

.myInput:focus {
    border: 1px solid #6698ff;
}

.leftText {
    font-size: 12px;
    color: #999;
    position: absolute;
    right: 22px;
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.title {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #e1e1e1;
    font-size: 12px;
    border-radius: 3px 0px 0px 3px;
    color: rgb(153, 153, 153);
    height: 22px;
    text-align: center;
    margin-left: -1px;
}

.title2 {
    display: flex;
    align-items: center;
    background: white;
    color: red;
    border: 1px solid red;
    font-size: 12px;
    border-radius: 3px 0px 0px 3px;
    height: 22px;
    text-align: center;
    margin-left: -1px;
}

.pd {
    width: 100%;
    white-space: nowrap;
}

.pd2 {
    color: black;
}

.head {
    font-size: 12px;
    color: black;
    text-align: left;
    display: flex;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 5px;
}

.pd3 {
    padding-left: 15px;
    padding-right: 10px;
    color: red;
    border: 1px solid red;
}

.pd3::placeholder {
    color: red;
}

.pd3::before {
    content: '*';
    color: red;
    position: absolute;
    left: 9px;
    margin-top: 4px;
}

.popup {
    position: absolute;
    background: white;
    border: 1px solid #eee;
    box-shadow: 1px 1px 15px #e5e5e5;
    z-index: 1;
    font-size: 13px;
    font-size: 12px;
    top: 25px;
}

.imgRow {
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    padding-left: 5px;
}

.item_name {
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}

.item_name:hover {
    background-color: #eee;
}

.item_name_default {
    color: #6698ff;
}


.must {
    font-size: 12px;
    color: red;
    padding-right: 5px;
}
</style>